<template>
	<view class="padding-bottom">
		<view v-if="isAvg" class="bg-white nav flex justify-between">
			<view class="cu-item" :class="index == curIndex ? ' cur' : ''" v-for="(item, index) in tabs" :key="index" @tap="tabSelect" :data-id="index">{{ item }}</view>
		</view>
		<scroll-view v-else scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index == curIndex ? ' cur' : ''" v-for="(item, index) in tabs" :key="index" @tap="tabSelect" :data-id="index">{{ item }}</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			TabCur: 0,
			scrollLeft: 0
		};
	},
	props:{
		curIndex:{
			type:[Number,String],
			default:0
		},
		isAvg:{//tabs平分
			type:[Boolean,String],
			default:false
		},
		tabs:{
			type:Array,
			default:function(){
				return []
			}
		}
	},
	methods: {
		tabSelect(e) {
			// this.curIndex = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			
			this.$emit('onChange',e.currentTarget.dataset.id)
		}
	}
}
</script>

<style>
.nav .cu-item {
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
}
.nav .cu-item.cur {
	color: #1c232b;
	border-color: #1c232b;
}
</style>
